<template>
    <view class="columnbox wdh-100 content">
        <view class="columnbox wdh-100 info-box">
            <view class="wdh-100 info-title">身份证照片</view>
            <view class="wdh-100 info-desc">证件需内容完整，图像清晰，真实且在有效期内</view>
            <view class="rowbox wdh-100 spb" style="margin-top: 40rpx;">
                <view class="columnbox one-pic" @click="chooseCardR">
                    <image v-if="cardr==''" src="/static/img/sfzr.png" mode="widthFix"></image>
                    <image v-else :src="cardr" mode="aspectFill"></image>
                    上传身份证人像页
                </view>
                <view class="columnbox one-pic" @click="chooseCardG">
                    <image v-if="cardg==''" src="/static/img/sfzg.png" mode="widthFix"></image>
                    <image v-else :src="cardg" mode="aspectFill"></image>
                    上传身份证国徽页
                </view>
            </view>
            <view class="wdh-100 info-title" style="margin-top: 40rpx;">身份信息</view>
            <view class="rowbox wdh-100 jus one-info">
                <view class="info-name">真实姓名</view>
                <input v-model="form.name" placeholder="请输入姓名" />
            </view>
            <view class="rowbox wdh-100 jus one-info">
                <view class="info-name">身份证号</view>
                <input v-model="form.idNumber" placeholder="请输入身份证号" />
            </view>
            <view class="rowbox wdh-100 jus one-info">
                <view class="info-name">有效期</view>
                <uni-datetime-picker @change='chooseDate' v-model="range" type="daterange" start="1910-3-20"
                    rangeSeparator="至" />
                <!-- <input v-model="form.validPeriod" placeholder="请选择有效期" /> -->
            </view>
        </view>
        <view class="wdh-100" style="height: 200rpx;"></view>
        <view class="rowbox bottom-box">
            <view class="rowbox pay-btn" @click="submitInfo">提交</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                range: [],
                curdate: '',
                show: true,
                cardr: '',
                cardg: '',
                form: {
                    name: '',
                    idNumber: '',
                    validPeriod: ''
                },
                submitflag: false
            };
        },
        onLoad() {
            var date = new Date()
            this.curdate = date.getFullYear() + '-' + (date.getMonth() + 1 > 9 ? date.getMonth() + 1 : ('0' + (date
                .getMonth() + 1))) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
        },
        methods: {
            chooseDate() {
                this.form.validPeriod = this.range.join(',').replace(/-/g, '.').replace(/,/g, '-')
            },
            chooseCardR() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        uni.showLoading({
                            title: ''
                        })
                        this.$req.uploadImg(res.tempFilePaths[0]).then(res => {
                            this.cardr = res.data.url
                            this.$req.post('/xcx/user/ocr/face?url=' + res.data.url, {
                                url: res.data.url
                            }).then(res => {
                                this.form.name = res.data.data.name
                                this.form.idNumber = res.data.data.idNumber
                                uni.hideLoading()
                            })
                        })
                    }
                })
            },
            chooseCardG() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        uni.showLoading({
                            title: ''
                        })
                        this.$req.uploadImg(res.tempFilePaths[0]).then(res => {
                            this.cardg = res.data.url
                            this.$req.post('/xcx/user/ocr/back?url=' + res.data.url, {
                                url: res.data.url
                            }).then(res => {
                                this.range = res.data.data.validPeriod.split('-')
                                this.form.validPeriod = res.data.data.validPeriod
                                uni.hideLoading()
                            })
                        })
                    }
                })
            },
            submitInfo() {
                if (this.cardr == '') {
                    uni.showToast({
                        title: '请上传身份人像页',
                        icon: 'none'
                    })
                    return false
                }
                if (this.cardg == '') {
                    uni.showToast({
                        title: '请上传身份证国徽页',
                        icon: 'none'
                    })
                    return false
                }
                if (this.form.name == '') {
                    uni.showToast({
                        title: '请输入真实姓名',
                        icon: 'none'
                    })
                    return false
                }
                if (this.form.idNumber == '') {
                    uni.showToast({
                        title: '请输入身份证号',
                        icon: 'none'
                    })
                    return false
                }
                if (this.form.validPeriod == '') {
                    uni.showToast({
                        title: '请输入有效期',
                        icon: 'none'
                    })
                    return false
                }
                if (!this.submitflag) {
                    uni.showLoading({
                        title: ''
                    })
                    this.submitflag = true
                    this.$req.post('/xcx/user/verified', this.form).then(res => {
                        this.submitflag = false
                        uni.hideLoading()
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        })
                        if (res.data.code == 200) {
                            let pages = getCurrentPages(); //获取所有页面栈实例列表
                            let nowPage = pages[pages.length -
                                1]; //当前页页面实例
                            let prevPage = pages[pages.length -
                                2]; //上一页页面实例
                            prevPage.$vm.refreshflag = true
                            uni.navigateBack()
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {}

    .info-box {
        padding: 0 20rpx;
    }

    .info-title {
        font-size: 32rpx;
        font-weight: bold;
    }

    .info-desc {
        font-size: 28rpx;
        color: #999999;
        margin-top: 10rpx;
    }

    .one-pic {
        color: #999999;
        font-size: 28rpx;

        image {
            margin-bottom: 20rpx;
            width: 342rpx;
            height: 200rpx;
        }
    }

    .one-info {
        padding: 32rpx 0;
        border-bottom: #f1f3f7 solid 1px;

        input {
            font-size: 28rpx;
        }
    }

    .info-name {
        font-size: 28rpx;
        width: 150rpx;
    }

    .bottom-box {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 20rpx 32rpx;
        padding-bottom: 40rpx;
        z-index: 9;
        border-top: #f2f5f5 solid 1px;
        width: 100%;
        justify-content: space-between;
    }

    .pay-btn {
        font-size: 28rpx;
        color: #fff;
        background: #1E72CA;
        border-radius: 10rpx;
        width: 100%;
        height: 90rpx;
    }
</style>